<template>
  <div class="auth-container">
    <!-- logo区域 -->
    <div class="logo-wrapper">
      <div class="logo-text">QingBook</div>
      <p class="slogan-text">立享青春</p>
    </div>

    <!-- 表单容器 -->
    <div class="form-card">
      <!-- 表单标签栏 -->
      <div class="form-tabs">
        <button 
          class="form-tab-btn"
          :class="{ 'form-tab-btn--active': activeTab === 'login' }"
          @click="activeTab = 'login'"
        >
          登录
        </button>
        <button
          class="form-tab-btn"
          :class="{ 'form-tab-btn--active': activeTab === 'register' }"
          @click="activeTab = 'register'"
        >
          注册
        </button>
      </div>

      <!-- 表单内容区 -->
      <div class="form-content">
        <!-- 登录表单 -->
        <form v-if="activeTab === 'login'" @submit.prevent="login" class="form-login">
          <!-- 用户名输入组 -->
          <div class="form-group">
            <label for="login-username" class="form-label">用户名</label>
            <input
              type="text"
              id="login-username"
              v-model="loginForm.username"
              class="form-input"
              placeholder="请输入用户名"
              required
            >
          </div>

          <!-- 密码输入组 -->
          <div class="form-group">
            <label for="login-password" class="form-label">密码</label>
            <input
              type="password"
              id="login-password"
              v-model="loginForm.password"
              class="form-input"
              placeholder="请输入密码"
              required
            >
          </div>

          <!-- 表单选项（记住我 + 忘记密码） -->
          <div class="form-options">
            <div class="remember-checkbox">
              <input type="checkbox" id="remember" v-model="loginForm.remember" class="checkbox-input">
              <label for="remember" class="checkbox-label">记住我</label>
            </div>
            <button type="button" class="forgot-password-btn">忘记密码?</button>
          </div>

          <!-- 登录提交按钮 -->
          <button 
            type="submit" 
            class="form-submit-btn"
            :class="{ 'form-submit-btn--disabled': isLoading }"
            :disabled="isLoading"
          >
            {{ isLoading ? '登录中...' : '登录' }}
          </button>
        </form>

        <!-- 注册表单 -->
        <form v-else @submit.prevent="register" class="form-register">
          <!-- 用户名输入组 -->
          <div class="form-group">
            <label for="register-username" class="form-label">用户名</label>
            <input
              type="text"
              id="register-username"
              v-model="registerForm.username"
              @input="validateUsername"
              @blur="checkUsername"
              class="form-input"
              placeholder="3-50个字符"
              required
            >
            <p class="form-error-hint" v-if="usernameError">{{ usernameError }}</p>
          </div>

          <!-- 邮箱输入组 -->
          <div class="form-group">
            <label for="register-email" class="form-label">邮箱</label>
            <input
              type="email"
              id="register-email"
              v-model="registerForm.email"
              @input="validateEmail"
              @blur="checkEmail"
              class="form-input"
              placeholder="请输入有效邮箱"
              required
            >
            <p class="form-error-hint" v-if="emailError">{{ emailError }}</p>
          </div>

          <!-- 昵称输入组 -->
          <div class="form-group">
            <label for="register-nickname" class="form-label">昵称</label>
            <input
              type="text"
              id="register-nickname"
              v-model="registerForm.nickname"
              @input="validateNickname"
              class="form-input"
              placeholder="2-50个字符"
              required
            >
            <p class="form-error-hint" v-if="nicknameError">{{ nicknameError }}</p>
          </div>

          <!-- 密码输入组 -->
          <div class="form-group">
            <label for="register-password" class="form-label">密码</label>
            <input
              type="password"
              id="register-password"
              v-model="registerForm.password"
              @input="validatePassword"
              class="form-input"
              placeholder="至少8个字符"
              required
            >
            <p class="form-error-hint" v-if="passwordError">{{ passwordError }}</p>
          </div>

          <!-- 注册提交按钮 -->
          <button 
            type="submit" 
            class="form-submit-btn"
            :class="{ 'form-submit-btn--disabled': isLoading || !formValid }"
            :disabled="isLoading || !formValid"
          >
            {{ isLoading ? '注册中...' : '注册' }}
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
// 保持原脚本逻辑不变
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'

const router = useRouter()
const authStore = useAuthStore()

const activeTab = ref('login')
const isLoading = ref(false)
const usernameError = ref('')
const emailError = ref('')
const nicknameError = ref('')
const passwordError = ref('')

const loginForm = ref({
  username: '',
  password: '',
  remember: false
})

const registerForm = ref({
  username: '',
  email: '',
  nickname: '',
  password: ''
})

const validateUsername = () => {
  if (registerForm.value.username.length < 3) {
    usernameError.value = '用户名至少3个字符'
    return false
  }
  usernameError.value = ''
  return true
}

const validateEmail = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(registerForm.value.email)) {
    emailError.value = '请输入有效的邮箱地址'
    return false
  }
  emailError.value = ''
  return true
}

const validateNickname = () => {
  if (registerForm.value.nickname.length < 2) {
    nicknameError.value = '昵称至少2个字符'
    return false
  }
  nicknameError.value = ''
  return true
}

const validatePassword = () => {
  if (registerForm.value.password.length < 8) {
    passwordError.value = '密码至少8个字符'
    return false
  }
  passwordError.value = ''
  return true
}

const formValid = computed(() => {
  return (
    validateUsername() &&
    validateEmail() &&
    validateNickname() &&
    validatePassword()
  )
})

const login = async () => {
  isLoading.value = true;
  try {
    const response = await authStore.login({
      username: loginForm.value.username,
      password: loginForm.value.password
    });
    
    if (response.success) {
      router.push('/discover');
    } else {
      alert(response.message || '登录失败，请检查用户名和密码');
    }
  } catch (error) {
    console.error('登录错误:', error);
    alert(error?.message || '登录失败');
  } finally {
    isLoading.value = false;
  }
}

const register = async () => {
  if (!formValid.value) return
  
  isLoading.value = true
  try {
    await authStore.register(registerForm.value)
    router.push('/')
  } catch (error) {
    alert(error.message || '注册失败')
  } finally {
    isLoading.value = false
  }
}

const checkUsername = async () => {
  if (!validateUsername()) return
  
  try {
    const response = await authStore.checkUsername(registerForm.value.username)
    usernameError.value = response.data ? '' : '用户名已存在'
  } catch (error) {
    usernameError.value = '验证服务不可用'
  }
}

const checkEmail = async () => {
  if (!validateEmail()) return
  
  try {
    const response = await authStore.checkEmail(registerForm.value.email)
    emailError.value = response.data ? '' : '邮箱已存在'
  } catch (error) {
    emailError.value = '验证服务不可用'
  }
}
</script>

<style scoped>
/* 全局容器样式 */
.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;
}

/* Logo区域样式 */
.logo-wrapper {
  text-align: center;
  margin-bottom: 40px;
}
.logo-text {
  font-size: 36px;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.slogan-text {
  font-size: 16px;
  color: #666;
}

/* 表单卡片样式 */
.form-card {
  width: 100%;
  max-width: 400px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 表单标签栏样式 */
.form-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}
.form-tab-btn {
  flex: 1;
  padding: 16px;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
}
.form-tab-btn--active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

/* 表单内容区通用样式 */
.form-content {
  padding: 24px;
}
.form-login, .form-register {
  width: 100%;
}

/* 表单组通用样式 */
.form-group {
  margin-bottom: 20px;
}
.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 错误提示样式 */
.form-error-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #ff4d4f;
  margin-bottom: 0;
}

/* 登录表单选项样式 */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.remember-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
}
.checkbox-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.checkbox-label {
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
.forgot-password-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}
.forgot-password-btn:hover {
  color: #4096ff;
}

/* 提交按钮样式 */
.form-submit-btn {
  width: 100%;
  padding: 14px;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.form-submit-btn:hover {
  background-color: #4096ff;
}
.form-submit-btn--disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.form-submit-btn--disabled:hover {
  background-color: #ccc;
}
</style>